<template>
  <div class="app-container home">
    <div class="jumbotron">
      <video src="../assets/videos/20230627142641821001.mp4" muted autoplay controls width="100%"></video>
    </div>
    <el-row :gutter="20" style="margin-top: 5%;">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <h1 style="font-size: 40px;">智能选课系统</h1>
        <p style="font-size: 20px;">
          选课系统是一种用于学生在学校或大学中选择他们将要上的课程的系统。该系统通常包括以下功能：
          <br>
          <span style="font-weight: bolder;">学生登录：</span>学生可以使用个人账号登录系统，查看可选课程和自己的选课情况。
          <br>
          <span style="font-weight: bolder;">课程浏览：</span>学生可以浏览学校或大学提供的所有课程信息，包括课程名称、教师信息、上课时间等。
          <br>

          <span style="font-weight: bolder;">选课咨询：</span>在学生对课程有问题时，可咨询相关课程信息。
          <br>
          选课系统的设计旨在简化学生选课流程，提高选课效率，同时也方便学校管理课程信息和学生选课情况。
        </p>
      </el-col>

      <el-col :sm="24" :lg="12" style="padding-left: 20%">
        <el-row>
          <el-col :span="12">
            <h2 style="font-size: 40px;">课程组成</h2>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <h4 style="font-size: 20px;">后端技术</h4>
            <ul style="font-size: 18px;">
              <li>python</li>
              <li>java</li>
              <li>Android</li>
              <li>AI</li>
              <li>分布式</li>
              <li>数据库</li>
              <li>...</li>
            </ul>
          </el-col>
          <el-col :span="6">
            <h4 style="font-size: 20px;">前端技术</h4>
            <ul style="font-size: 18px;">
              <li>Vue</li>
              <li>Vuex</li>
              <li>Element-ui</li>
              <li>Axios</li>
              <li>可视化平台</li>
              <li>微信小程序</li>
              <li>...</li>
            </ul>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-divider />
    <!-- <el-row>
      <el-col :span="10" style="margin-left: 3%;">
        <div class="card">

        </div>

      </el-col>
      <el-col :span="6">
        <div class="card">
          <img src="../assets//images/DNUI.jpg" alt="">
          <div class="card__content">
            <a href="https://www.neusoft.edu.cn/" class="card__title">DNUI
            </a>
            <p class="card__description">大连东软信息学院是经国家教育部批准设立，由东软控股、亿达集团共同投资举办的一所以工学为主，兼办管理学、文学、艺术学等学科专业的民办普通高等院校。</p>
          </div>
        </div>
        <div class="card">
          <img src="../assets/images/宣传.gif" alt="" height="100%">
          <div class="card__content">
            <a href="https://mp.weixin.qq.com/s/IatCHKUxzhBH8DV8jERdqQ" class="card__title">传承·超越
            </a>
            <p class="card__description">新版形象片重磅发布</p>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="card">
          <img src="../assets//images/Dnui.png" alt="" height="100%">
          <div class="card__content">
            <p class="card__title">学校校训
            </p>
            <p class="card__description">精勤博学，学以致用</p>
          </div>
        </div>
        <div class="card">
          <img src="../assets//images/校歌.jpg" alt="" height="400rpx" width="400rpx">
          <div class="card__content">
            <a href="https://www.neusoft.edu.cn/html/886/2024-01-18/content-5873.html" class="card__title">校歌
            </a>
            <p class="card__description">《梦想在路上》</p>
          </div>
        </div>
      </el-col>
    </el-row> -->
    <div class="container">
      <section id="img-one" class="img">
        <h1>大连东软信息学院</h1>
      </section>
      <section class="content-one">
        <div class="txt-box">
          <div class="cnt">
            <h2>大连东软</h2>
            <p>大连东软信息学院是经国家教育部批准设立，由东软控股、亿达集团共同投资举办的一所以工学为主，兼办管理学、文学、艺术学等学科专业的民办普通高等院校。学校下设计算机科学与技术系、软件工程系、信息管理系、商务管理系、电子工程系、数字艺术系、英语系、日语系、俄语系、基础教学部、科研管理与研究生部、国际教育学院、继续教育学院、创新创业学院14个教学机构，开展普通全日制本专科教育、成人高等教育、高等教育自学考试及留学生教育等多种教育形式，并与东北大学合作开展研究生教育。目前，各级各类在校生人数达到18000余人。</p>
            <p>
              <a href="https://www.neusoft.edu.cn/" class="btn">大连<strong>东软</strong><em>信息学院</em></a>
            </p>
          </div>
        </div>
      </section>
      <section class="content-two">
        <div class="txt-box">
          <div class="cnt">
            <h2>精勤博学，学以致用</h2>
            <p>
              强调的是为学为人的态度和原则，并诠释了“学”的程度、方式方法和范畴。作为大连东软信息学院的师生员工，首先要培养探究钻研、专业敬业的精神，保持专注严谨的态度，精益求精，避免功利浮躁之风；其次要勤勉，大学之中，无论是教育者的治学授业、育人树才，还是学生的求学问真、实践创新及人格完善皆是在勤奋求知、勤勉践行的过程中得到充分的历练。要不怕吃苦、脚踏实地，用锲而不舍、水滴石穿的精神追求卓越；
              倡导将学与用紧密联系起来，学用结合，知行合一，将知识运用于实际应用，并在应用中敢为人先，勇于创新，使所学能够真正为社会创造价值，从而实现个人价值和社会价值的统一，达成“教育创造学生价值，学生创造社会价值”的目标，彰显教育的价值和使命。
            </p>
            <p>
              <a href="https://www.neusoft.edu.cn/" class="btn">大连<strong>东软</strong><em>信息学院</em></a>
            </p>
          </div>
        </div>
      </section>
      <section class="content-three">
        <div class="txt-box">
          <div class="cnt">
            <h2>博学笃志，海纳百川</h2>
            <p>广泛学习而意志坚定。大海因为有宽广的度量才容纳了成百上千的河流;高山因为没有勾心斗角的凡世杂欲才如此的挺拔。上下联最后一字--"大"与"刚"，意思是说，这种浩然之气，最伟大，最刚强。更表明了作者至大至刚的浩然之气。这种海纳百川的胸怀和"壁立千仞"的刚直，来源于"无欲"。这样的气度和"无欲"情怀以及至大至刚的浩然之气，正是中华民族需要传承的精神。</p>
            <p>
              <a href="https://www.neusoft.edu.cn/" class="btn">大连<strong>东软</strong><em>信息学院</em></a>
            </p>
          </div>
        </div>
      </section>
      <section id="img-two" class="img">
        <h1>智能选课系统欢迎您</h1>
      </section>
    </div>
  </div>
</template>

<script src="../api/js/jquery-3.7.1.js" type="text/javascript" charset="utf-8"></script>
<script src="../api/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="../api/js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
<script src="../api/js/popper.js" type="text/javascript" charset="utf-8"></script>
<script>

export default {
  name: "Index",
  data() {
    return {
      currentDate: new Date(),
      // 版本号
      version: "3.8.6",
    }
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    }
  }
};
</script>

<style scoped lang="scss">
@import '../views/css/bootstrap.css';

* {
  // margin: 0;
  // padding: 0;
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
}

.container {
  width: 100vw;
  height: auto;
}

section{
  height: 100vh;
  position: relative;
  color: rgba(255, 255, 255, .8);
  display: flex;
  font-size: 10vh;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  text-shadow: 4px 4px rgb(46, 43, 43);
  justify-content: center;
  align-items: center;

}

#footer {
  background: #c0b5aa;
  height: 50vh;
  color: #fff;
  font-size: 20vh;
}

.img {
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  user-select: none;
}

#img-one {
  background-image: url(../assets/images/index-bg7.jpg);
  background-size: cover;
}

#img-two {
  background-image: url(../assets/images/index-bg8.jpg);
}

.content-one {
  background: url(../assets/images/index-bg9.jpg) no-repeat fixed center;
  background-size: cover;
}

.content-two {
  background: url(../assets/images/index-bg11.jpg) no-repeat fixed center;
  background-size: cover;
}

.content-three {
  background: url(../assets/images/index-bg10.jpg) no-repeat fixed center;
  background-size: cover;
}

.txt-box {
  width: 100%;
  height: 50%;
  position: absolute;
  bottom: 25%;
  text-align: center;
  background-color: rgba(0, 0, 0, .3);
  transform-origin: center bottom;
  transform: skew(0, -8deg);
}

.txt-box .cnt {
  display: inline-block;
  text-align: right;
  margin: 9% 0 10px;
  width: 90%;
  max-width: 990px;
  transform-origin: right bottom;
  transform: skew(0, 8deg);
}

.cnt h2 {
  margin-top: 100px;
  font-size: 36px;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  text-shadow: 1px 0px 0px #323232;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 5px;
}

.cnt p {
  font-size: 20px;
  line-height: 1.7;
  margin-bottom: 10px;
  color: #fff;
}

.btn {
  font-size: 90%;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  letter-spacing: 0.1em;
  text-shadow: 1px 0px 0px black;
  line-height: 2.8;
  display: inline-block;
  background-color: #eaeaea;
  color: #000;
  border: 3px solid #000;
  white-space: nowrap;
  text-decoration: none;
  padding: 0 20px;
}

// -------------------------------
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans",
  "Helvetica Neue",
  Helvetica,
  Arial,
  sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}


.el-carousel__item:nth-child(n) {
  background: url(../assets/images/Dnui1.jpg) no-repeat 50%;
}

.el-carousel__item:nth-child(4n) {
  background: url(../assets/images/东软教育.png) no-repeat 50%;
  background-color: #475669;
  width: 100%;

}

.el-carousel__item:nth-child(6n) {
  background: url(../assets/images/DNUIedu1.jpg) no-repeat 50%;
  width: 100%;
}

.el-carousel__item:nth-child(5n) {
  background: url(../assets/images/DNUIedu.jpg) no-repeat 50%;
  width: 100%;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}



.card {
  position: relative;
  width: auto;
  height: auto;
  background: linear-gradient(-45deg, #fffdfd 0%, #e0e1dc 100%);
  border-radius: 10px;
  margin: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.card svg {
  width: 48px;
  fill: #333;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.card:hover {
  transform: rotate(-5deg) scale(1.1);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.card__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  background-color: #fff;
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.card:hover .card__content {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 1;
}

.card__title {
  margin: 0;
  font-size: 30px;
  color: #333;
  font-weight: 700;
}

.card__description {
  margin: 10px 0 0;
  font-size: 20px;
  color: #777;
  line-height: 1.4;
}

.card:hover svg {
  scale: 0;
  transform: rotate(-45deg);
}

.card__description p {
  font-size: 30px;
}

.card__description .text {
  font-size: 20px;
  font-weight: bolder;
}</style>


